<template>
	<div class="detail">
		<header>
			<div class="header-returns" v-show="isShow">
				<div @click="goBack">
					<i class="iconfont icon-back"></i>
				</div>
				<div>
					<i class="iconfont icon-shouye1"></i>
				</div>
			</div>
			
			<div class="header-bar" v-show="!isShow" :style="styleOption">
				<div @click="goBack">
					<i class="iconfont icon-back"></i>
				</div>
				<div>
					<span>商品详情</span>
					<span>商品评价</span>
				</div>
				<div>
					<i class="iconfont icon-shouye1"></i>
				</div>
			</div>
		</header>
		<section ref="wrapper">
			<div>
				<div class="swiper-main">
					<swiper :options="swiperOption">
					    <swiper-slide
						v-for="(item,index) in swiperList"
						:key="index"
						>
						<img :src="item.imgUrl" alt="">
						</swiper-slide>
					</swiper>
					<div class="swiper-pagination"></div> 
				</div>
				<div class="goods-name">
					<h1>{{goods.name}}</h1>
					<span>性价首选，茶感十足、鲜醇耐泡的大众口粮</span>
				</div>
				<div class="goods-price">
					<div class="pprice">
						<span>￥</span>
						<b>{{goods.price}}</b>
					</div>
					<div class="oprice">
						<span>价格：</span>
						<del>{{goods.price}}</del>
					</div>
				</div>
				<div>
					<img style="width: 100%; height: 500px;" :src="goods.imgUrl" alt="">
					<img style="width: 100%; height: 500px;" :src="goods.imgUrl" alt="">
					<img style="width: 100%; height: 500px;" :src="goods.imgUrl" alt="">
					<img style="width: 100%; height: 500px;" :src="goods.imgUrl" alt="">
					<img style="width: 100%; height: 500px;" :src="goods.imgUrl" alt="">
				</div>
			</div>
		</section>
		<footer>
			<div class="add-cart" @click="addCart">加入购物车</div>
			<div>立即购买</div>
		</footer>
	</div>
</template>

<script>
	import 'swiper/dist/css/swiper.css'
	import { swiper, swiperSlide } from 'vue-awesome-swiper'
	import BetterScroll from 'better-scroll'
	import http from '@/common/api/request.js'
	import { Toast } from 'mint-ui'
	export default{
		components: {
		  swiper,
		  swiperSlide
		},
		created(){
			this.id = this.$route.query.id;
			this.getData();
		},
		mounted() {
			this.BetterScroll = new BetterScroll(this.$refs.wrapper,{
				probeType:3,
				bounce:false,
				click:true
			})
			this.BetterScroll.on('scroll',(pos)=>{
				//详情页顶端两个div渐变切换
				let posY = Math.abs(pos.y);
				let opacity = posY/180;
				opacity = opacity > 1 ? 1 :opacity;
				this.styleOption={
					opacity:opacity
				}
				if(posY >= 50){
					this.isShow = false;
				}else{
					this.isShow = true;
				}
			})
		},
		activated(){
			//判断当前urlid和之前的id是否一致
			if( this.$route.query.id != this.id){
				this.getData();
				this.id = this.$route.query.id;
			}
		},
		methods:{
			async getData(){
				let id = this.$route.query.id;
				let res = await http.$axios({
					url:'/api/goods/id',
					params:{
						id
					}
				})
				this.goods = res;
			},
			//加入购物车
			addCart(){
				let id = this.$route.query.id;
				http.$axios({
					url:'/api/addCart',
					method:"post",
					data:{
						goodsId:id
					},
					headers:{
						token:true
					}
				}).then(res=>{
					if( res.success ){
						Toast('添加购物车成功');
					}
				})
			},
			//返回上一页
			goBack(){
				this.$router.back();
			}
		},
		data(){
		  return{
			  id:0,
			  goods:{},
			  styleOption:{},
			  BetterScroll:'',
			    isShow:true,
				swiperOption: {//swiper3
					autoplay: 3000,
					speed: 1000,
					pagination: {
						el: '.swiper-pagination',
						type:'fraction'
					}
				},
				swiperList:[
					{imgUrl:'./imgs/goods1.png'},
					{imgUrl:'./imgs/goods2.jpeg'},
					{imgUrl:'./imgs/goods3.jpeg'},
					{imgUrl:'./imgs/goods4.jpeg'},
					{imgUrl:'./imgs/goods5.jpeg'}
				]
		  }
		}
	}
</script>

<style scoped>
	.detail{
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}
	section{
		flex: 1;
		overflow: hidden;
	}
	header{
		position:fixed;
		left:0;
		top:0;
		z-index: 999;
		width: 100%;
		height: 1.7333rem;
	}
	header .header-returns{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 1.173333rem;
	}
	header .header-returns > div{
		margin: 0 0.266667rem;
		width: 0.906667rem;
		line-height: 0.906667rem;
		text-align: center;
		background-color:rgba(0, 0, 0, 0.3) ;
		border-radius: 50%;
	}
	header .header-returns > div i{
		font-size: 0.693333rem;
		color: #fff;
	}
	header .header-bar{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 1.173333rem;
		font-size: 0.426667rem;
		background-color: #fff;
	}
	header .header-bar span{
		padding: 0 10 0px;
	}
	header .header-bar i{
		padding: 0 0.266667rem;
		font-size: 0.586667rem;
	}
	.swiper-main{
		position: relative;
		width: 100%;
		height: 10rem;
		overflow: hidden;
	}
	.swiper-container img{
		width: 100%;
		height: 10rem;
		/* margin-top: 3rem; */
	}
	.swiper-container{
		width: 100%;
		height: 10rem;
	}
	.swiper-pagination{
		width: 100%;
		bottom: 0.266667rem;
		text-align: right;
		color: #fff;
		font-size: 0.426667rem;
	}
	::v-deep .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
		left: -0.533333rem;
	}
	.goods-name{
		padding: 0.266667rem 0.533333rem;
		border-bottom: 1px solid #ccc;
	}
	.goods-name h1{
		font-size: 0.48rem;
		font-weight: 500;
		
	}
	.goods-name span{
		padding: 0.08rem 0;
		font-size: 0.373333rem;
		color: #999;
	}
	.goods-price{
		padding: 0.266667rem 0.533333rem;
		/* border-bottom: 1px solid #ccc; */
	}
	.goods-price .pprice{
		color: red;
	}
	.goods-price .pprice span{
		font-size: 0.32rem;
	}
	.goods-price .oprice{
		color: #999;
		font-size: 0.373333rem;
	}
	footer{
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1.306667rem;
		border-top: 1px solid #ccc;
		background: #fff;
	}
	footer div{
		width: 50%;
		line-height: 1.173333rem;
		font-size: 0.426667rem;
		text-align: center;
		color: #fff;
		background-color: red;
	}
	footer .add-cart{
		background-color: #ff9500;
	}
	
	
	
</style>